<template>
  <div>
    <van-tabs @click="onTabClick" v-model="activeName" animated>
      <van-tab
        v-for="item in cateList"
        :title="item.title"
        :key="item.id"
        :name="item.id"
      >
        <!-- 图片列表 -->
        <ul class="img_list">
          <li v-for="info in photoList" :key="info.id">
            <van-image
              :src="info.img_url"
              lazy-load
              @click="go2Detail(info.id)"
            >
            </van-image>
            <div class="botInfo">
              <p>{{ info.seo_title }}</p>
              <p>{{ info.content }}</p>
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 0,
      cateList: [],
      photoList: []
    }
  },

  created() {
    this.getPhotoCates() // 获取分类数据
    this.getPhotoList(0) // 获取图片列表数据
  },

  methods: {
    async getPhotoCates() {
      var { data } = await this.$http.get('/api/getimgcategory')
      if (data.status !== 0) return this.$toast('获取图片分类失败!')

      this.cateList = data.message
      this.cateList.unshift({ title: '全部', id: 0 })

      // console.log(this.cateList)
    },

    onTabClick(name, title) {
      this.getPhotoList(name)
    },

    async getPhotoList(id) {
      var { data } = await this.$http.get('/api/getimages/' + id)
      if (data.status !== 0) return this.$toast('获取图片列表失败!')
      this.photoList = data.message
      // console.log(this.photoList)
    },

    go2Detail(id) {
      this.$router.push('/photo/info/' + id)
    }
  }
}
</script>

<style lang="less" scoped>
.img_list {
  padding: 0 10px;
  li {
    width: 100%;
    margin: 10px 0;
    border-radius: 5px;
    overflow: hidden;
    height: 300px;
    min-height: 200px;
    position: relative;
    .van-image {
      width: 100% !important;
      height: 100% !important;
    }
    .botInfo {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      padding: 0 10px;
      height: 75px;
      p {
        margin: 5px 0;
        font-size: 12px;
      }
    }
  }
}
</style>
